<template>
	<view>
		<view class="bg-white padding">
			<u-steps :list="numList" :current="0" mode="number"></u-steps>
		</view>
		<view class="margin-top padding bg-white">
			<view class="flex align-center justify-between">
				<text class="title text-black">售后类型</text>
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="order-goods margin-top flex" style="width: 100%;" v-for="(item,index) in orderInfo.ordersInfos" :key="index">
				<view class="">
					<image :src="item.image.split(',')[0]"  mode="" style="width: 200rpx;height: 200rpx;"></image>
				</view>
				<view class="margin-left">
					<view class="">
						{{item.name}}
					</view>
					<view class="flex justify-between align-center" style="width: 460rpx;">
						<text>{{item.num}}</text>
						<view>
							<view  class="text-right text-price text-red">{{item.price}}</view>
						<!-- <u-button size="mini" type="warning" @click="pathUrl(item.productNo)">申请售后</u-button> -->
						</view>
					</view>
				</view>
			</view>
			<view class="border-bottom padding-tb">
				<view class="flex justify-between align-center">
					<text>退款方式</text>
					<text>原路退回</text>
				</view>
			</view>
			<view class="border-bottom padding-tb">
				<view class="flex justify-between align-center">
					<text>退款金额</text>
					<text class="text-right text-price text-red">{{payamount}}</text>
				</view>
			</view>
			<view class="border-bottom padding-tb" @click="show=true">
				<view class="flex justify-between align-center">
					<text>退款理由</text>
					<text>{{message}}</text>
				</view>
			</view>
			<view class="border-bottom padding-tb">
				<view class="flex justify-between align-center">
					<text>退款说明</text>
					<text>原路退回</text>
				</view>
			</view>
			<view class="border-bottom padding-tb" v-if="certificateShow">
				<u-upload @on-success="upsuccess" :file-list="fileList" uploadText="上传凭证"></u-upload>
			</view>
			<u-button @click="insertaftersale" class="margin-top" shape="circle" type="primary" >提交申请</u-button>
		</view>
		<u-picker :value="show" @cancel="cancel" @confirm="confirm" :range="columns" mode="selector" rangeKey="name"></u-picker>
	</view>
</template>

<script>
import { Certificate } from 'crypto';
	export default {
		data() {
			return {
				show: false,
				orderInfo:{},
				searchVal: {
					orderId: 'db0f9c70-f93a-eb12-fe19-3a125ec19694',
					orderNo: '',
				},
				certificateShow:false,
				productNo:'',
				payamount:0,
				message:'请选择退款理由',
				numList: [{
					name: '提交申请'
				}, {
					name: '商家审核'
				}, {
					name: '完成'
				}, ],
				list: [{
						name: 'apple',
						disabled: false
					},
					{
						name: 'banner',
						disabled: false
					},
					{
						name: 'orange',
						disabled: false
					}
				],
				form:{
					memberId:uni.getStorageSync('userInfo').id,
					orderNo:'',
					aftersaleInfos:'',
					code:'',
					reason:'',
					remarks:'',
					certificate:'',
				},
				columns: [
					
				],
				fileList:[]
			}
		},
		onLoad(e) {
			this.getdictionary('list','after_type')
			this.getdictionary('columns','cause_type')
			if (e.id) {
				if(e.product){
					this.productNo=e.product
				}
				this.searchVal.orderId = e.id
				this.GetOrderInfo()
			}
		},
		methods: {
			// 获取退款理由
			getdictionary(api,type) {
				let that=this
				let result=[]
				that.$ajax.getdictionary({
					Type: type
				}).then(res => {
					that[api]=res.data
					if(api=="list"){
						that[api]=that[api].filter(v=>{
							return {
								...v,
								disabled:false,
								checked:false
							}
						})
					}
				})
			},
			radioGroupChange(val){
				this.list.forEach(v=>{
					if(v.name==val){
						this.form.code=v.code
						if(v.code==2){
							this.certificateShow=true
						}else {
							this.certificateShow=false
							this.form.certificate=''
						}
					}
				})
			},
			//点击确定
			confirm(val){
				this.message=this.columns.filter((v,index)=>{
					if(val[0]==index){
						this.form.reason=v.code
						return v
					}
				})[0].name
				this.cancel()
			},
			// 点击取消
			cancel(){
				this.show=false
			},
			// 获取订单详情
			GetOrderInfo() {
				this.$ajax.GetOrderInfo(this.searchVal).then(res => {
					this.orderInfo = res.data
					if(this.productNo){
						this.orderInfo.ordersInfos=this.orderInfo.ordersInfos.filter(v=>{
							if(v.productNo==this.productNo){
								this.payamount+=v.price
								return v
							}
						})
					}else {
						this.orderInfo.ordersInfos=this.orderInfo.ordersInfos.filter(v=>{
							if(!v.status){
								this.payamount+=v.price
								return v
							}
						})
					}
					this.form.aftersaleInfos=this.orderInfo.ordersInfos.map(v=>{
						return {
							productNo:v.productNo,
							barcode:v.barcode,
							price:v.price
						}
					})
					this.form.orderNo=this.orderInfo.orderNo
				})
			},
			// 跳转
			pathUrl(item){
				uni.navigateTo({
					url:`/pages/order/aftersales/aftersales?id=${this.searchVal.orderId}&product=${item}`
				})
			},
			// 申请售后
			insertaftersale(){
				if(!this.form.code){
					this.$apis.msg('请选择售后类型')
					return
				}
				if(!this.form.reason){
					this.$apis.msg('请选择退款理由')
					return
				}
				this.$ajax.insertaftersale(this.form).then(res=>{
					this.$apis.msg('申请成功')
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/order/afterlist/afterlist'
						})
					},1000)
				})
			},
			// 上传成功回调
			upsuccess(val){
				this.form.certificate=uni.getStorageSync('image')+res.data
			}
		}
	}
</script>

<style>

</style>